<template>
  <div class="area">
    <el-row>
      <el-col :span="2">
        <div class="qrcode">
          <img :src="imgsrc" />
        </div>
      </el-col>
      <el-col :span="5">
        <el-input v-model="input" class="input"> </el-input>
        <el-row>
          <div class="download">
            <el-button @click="download">下载二维码</el-button>
          </div>
          <div class="download1">
            <el-button @click="jump">打开</el-button>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    data() {
      return {
        imgsrc: null,
        input: null,
      };
    },
    props: {
      questionnaire_id: Number,
    },
    created() {
      this.input = "http://8.140.186.185:8008/deliver/" + this.questionnaire_id;
      const formData = {
        questionnaire_id: this.questionnaire_id,
      };
      axios.post("qrcode/", formData).then((response) => {
        this.imgsrc = response.data.url;
      });
    },
    methods: {
      jump() {
        this.$router.push("/deliver/" + this.questionnaire_id);
      },
      download() {
        window.location.href = this.imgsrc;
      },
    },
  };
</script>

<style scoped>
.qrcode {
  width: 105px;
  height: 105px;
  border: 1px solid #e1e7f2;
  border-radius: 3px;
}
img {
  max-width: 100%;
}
.area {
  margin: auto auto;
}
.download {
  margin-top: 16px;
  height: 45px;
  margin-right: 45px;
  width: 130px;
}
.download1 {
  margin-top: 16px;
  height: 45px;
  width: 120px;
}
.el-button {
  height: 100%;
  width: 100%;
}
.input {
  height: 45px;
}
</style>